<template>
	<view>
		<u-navbar leftIcon="" title="預約訂單" placeholder>
			<view class="flexright xiaohui" slot="right" v-if="ishave_zt"
				@click="jumpurl('/pages/workbench/zhuotaigl')">查看使用</view>
		</u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="tabList" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="" v-for="ite in list.data" :key="ite.yuefenzu">
				<view class="bghuang margin_top flexbetween radius hei_text main_size">
					<view>{{ite.yuefenzu}}</view>
					<view>{{ite.total}}</view>
				</view>
				<view class="mainpadding_top ffffff radius" v-for="item in ite.data" :key="item.id" @click="jumpdetail(item.id)">
					<view class="flexbetween">
						<view class="titletext hong_text bold" v-if="item.ordergood.call_no">#{{item.ordergood.call_no}}</view>
						<view class="hong_text main_size" v-show="item.status==0">未到店</view>
						<view class="lv_text main_size" v-show="item.status==1">已到店</view>
						<view class="huang_text main_size" v-show="item.status==2 && item.desk!=-1">{{item.desk}}</view>
						<view class="hui_text main_size" v-show="item.status==88">用戶取消</view>
						<view class="lv_text main_size" v-show="item.status==99">已完成</view>
					</view>
					<view class="hei_text margin_top main_size bold">客戶名稱：{{item.username}}</view>
					<view class="hui_text margin_top main_size bold">客戶電話：{{item.phone}}</view>
					<view class="flexbetween margin_top" v-if="item.image">
						<view class="xiaohei main_size" >支付憑證</view>
						<image class="listleftimg1 radius" :src="item.image_text" mode="" @click.stop="lbtpriview(0,[item.image_text])"></image>
					</view>
					<view class="margin_top2 xiaolan" v-if="item.fpinfo">
						<view>發票編號：{{item.fpinfo.invoice_number}}</view>
					</view>
					<view class="hui_text margin_top main_size bold">
						客戶人數：兒童{{item.ernum}}人，老人{{item.oldnum}}人，共{{item.ernum+item.oldnum+item.crnum}}人</view>
					<view class="huang_text margin_top main_size bold">預約時間：{{secondDate(item.yuetime,0,0)}}</view>
					<view class="lv_text margin_top main_size bold" v-show="item.status==99">
						完成時間：{{secondDate(item.updatetime,0,0)}}</view>
					<view class="hong_text margin_top main_size bold" v-show="item.status==88">
						取消時間：{{secondDate(item.updatetime,0,0)}}</view>
					<view class="xiaohui margin_top bold textright">
							共{{item.ordergood.total_num || 0}}件，合計：
						<text class="xiaohuang">${{item.ordergood.countmoney || 0}}</text>
						<text>，優惠${{item.ordergood.yh_money || 0}}，已付：${{item.ordergood.paymoney || 0}}，</text>
						<text class="xiaohong">未付：${{item.ordergood.zhuimoney || 0}}</text>
					</view>
					<view class="flexright margin_top">
						<view class="listbtnhuang" v-show="item.status==0" @click.stop="phone(item)">
							{{item.is_guo==1?"已撥號":"撥號"}}</view>
						<!-- #ifdef APP-PLUS -->
						<!-- <view class="listbtnhuang margin_left2" v-show="item.status==0||item.status==1">推送</view> -->
						<!-- #endif -->
						<!-- <view class="listbtnhuang margin_left2" v-show="item.status==0" @click.stop="skipOrder(item.id)">跳过
							</view> -->
						<view class="listbtnhuang margin_left2" v-show="item.status==0 || item.status==1"
							@click.stop="cancelOrder(item.id)">取消</view>
						<view class="listbtnhuang margin_left2" v-show="item.status==1 && !ishave_zt"
							@click.stop="seating(item.id,item.ernum+item.oldnum+item.crnum)">完成
						</view>
						<view class="listbtnhuang margin_left2" v-show="item.status==1 && ishave_zt"
							@click.stop="seating(item.id,item.ernum+item.oldnum+item.crnum)">入座/服務
						</view>
						<view class="listbtnhuang margin_left2" v-show="item.status==2" @click.stop="diancan(item)">點餐
						</view>
						<view class="listbtnhuang margin_left2" v-show="item.status==2" @click.stop="xianjinsk(item)">
							收款</view>
					</view>
					<view v-if="item.ordergood.ordergoodslist.length">
						<view class="padding_top3 line_top margin_top">
							<view class="flexbetween">
								<view class="text_a color_ling">訂單編號：{{item.ordergood.order_sn}}</view>
								<view class="text_x color_red" v-if="item.ordergood.call_no">#{{item.ordergood.call_no}}</view>
							</view>
							<view class="flexleft margin_top" v-for="(ite,inde) in item.ordergood.ordergoodslist" :key="inde">
								<view class="goodsImg margin_right3">
									<image :src="ite.logoimage_text" mode=""></image>
								</view>
								<view class="flex1">
									<view class="text_a color_san">{{ite.goods_name}}</view>
									<view class="text_b color_six flexbetween margin_top1" v-if="ite.wei || ite.hei">
										<text>尺寸：{{ite.wei}}*{{ite.hei}}</text>
										<text>用量：{{ite.formulacount}}{{ite.size}}</text>
									</view>
									<view class="text_b color_six" v-show="ite.spunatname">規格：{{ite.spunatname}}</view>
									<view class="flexbetween margin_top1">
										<view class="price xiaohuang">${{ite.d_price}}&nbsp;&nbsp;&nbsp;x{{ite.num}}</view>
										<view class="text_six xiaohuang color_orange">${{ite.price}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<u-modal :show="showConfirm" showCancelButton confirmColor="#ffb800" @cancel="showConfirm=false" confirmText="確認" cancelText="取消"
			@confirm="orderConfirm">
			<view class="slot-content color_ling text_weight text">
				{{text}}
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showConfirm: false,
				text: "",
				tabList: [{
					id: 0,
					name: '全部',
					badge: {
						value: 0,
					}
				}, {
					id: 1,
					name: '未到店',
					badge: {
						value: 0,
					}
				}, {
					id: 2,
					name: '已到店',
					badge: {
						value: 0,
					}
				}, {
					id: 3,
					name: '已分配',
					badge: {
						value: 0,
					}
				}, {
					id: 4,
					name: '已完成',
					badge: {
						value: 0,
					}
				}],
				tabsId: 0, //默认全部
				shop_id: uni.getStorageSync("shop_id"),
				page:1,
				list: {
					data: []
				},
				list: {
					data: []
				},
				id: "", //操作的订單id
				orderType: 0, //0取消 1跳过
				ishave_zt: true, //是否有使用，
			}
		},
		onShow() {
			this.getList()
			this.getztList()
		},
		methods: {
			jumpdetail(id){
				uni.navigateTo({
					url:"/pages/yuYueOrder/dingdanxq?id="+id
				})
			},
			async getztList() { //使用列表
				let _this = this
				let res = await this.http.request('/api/shop/listtable', 'POST', {
					shop_id: uni.getStorageSync("shop_id"), //店鋪id
				})
				if (res.code == 1) {
					if (res.data.length == 0) {
						this.ishave_zt = false
					}
				}
			},
			getorderMsg() {
				this.http.request('/api/Ordermake/orderData', 'POST', {
					shop_id: this.shop_id, //店鋪id
				}).then(res => {
					this.tabList[0].badge.value = res.data.total_num
					this.tabList[1].badge.value = res.data.wdd_num
					this.tabList[2].badge.value = res.data.ydd_num
					this.tabList[3].badge.value = res.data.yfp_num
				})
			},
			async getList(isPage, page) {
				this.getorderMsg()
				let _this = this
				let obj = {
					"0": "",
					"1": "0",
					"2": "1",
					"3": "2",
					"4": "99",
				}
				let res = await this.http.request("/api/Ordermake/listOrdermake", "POST", {
					shop_id: this.shop_id,
					status: obj[this.tabsId]
				})
				if (res.code == 1) {
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						_this.list = res.data
						_this.list.data = resList.data;
					}
				} else if (res.code == 0) {
					this.list.data = []
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
			tabChage(e) {
				console.log(e);
				this.tabsId = e.id
				this.getList()
			},
			phone(item) {
				let p = item.phone
				if (item.is_guo != 1) {
					this.makecall(item.id)
				}
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获錯误{makePhoneCall:fail cancel}
				})
			},
			makecall(id) {
				this.http.request("/api/ordermake/makecall", "POST", {
					id
				}).then(res => {
					this.getList()
				})
			},

			skipOrder(id) { //跳过
				this.id = id
				this.text = "您確定要跳過此訂單嗎？"
				this.orderType = 1
				this.showConfirm = true
			},
			cancelOrder(id) { //取消
				this.id = id
				this.text = "您確定要取消此訂單嗎？"
				this.orderType = 0
				this.showConfirm = true
			},
			async orderConfirm() { //確認 取消订單/刪除订單
				let url = "",
					text = "";
				if (this.orderType == 0) {
					url = "/api/Ordermake/endOrdermake"
					text = "取消成功"
				} else {
					url = "/api/Ordermake/guoOrdermake"
					text = "跳過成功"
				}
				let _this = this
				let res = await this.http.request(url, 'POST', {
					id: this.id
				})
				if (res.code == 1) {
					this.http.toast(text)
					this.showConfirm = false
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			seating(id, count) { //入座/服務
				if (this.ishave_zt == false) {
					this.http.request('/api/Ordermake/addOrdermake', 'POST', {
						ordermark_id: id, //订單id
						table_id: 0,
						order_type:2,
					}).then(res => {
						if (res.code == 1) {
							this.getList()
						} else {
							this.http.toast(res.msg)
						}
					})
					return false
				}
				uni.navigateTo({
					url: `./selectDesk?id=${id}&count=${count}`
				})
			},
			diancan(item) {
				uni.setStorageSync("order_goods_id", item.order_goods_id)
				uni.navigateTo({
					url: "/pages/callOutOrder/xuanzefw?orderly=1"
				})
			},
			xianjinsk(item) {
				uni.navigateTo({
					url:"/pages/yuYueOrder/yuyuesk?total_price="+item.ordergood.zhuimoney+"&id="+item.id
				})
			},
			jumpurl(url) {
				console.log(123);
				uni.navigateTo({
					url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.margin_right3{
		margin-right: 30rpx;
	}
	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	
		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.bghuang {
		background-color: #feb800;
		padding: 15rpx 30rpx;
	}

	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}
</style>